<template>
    <Popup class="tech-become-member" v-model="visiable">
        <div class="become-member-content">
            <img class="become-member-img" src="@assets/img/member_crown.png" alt="门店休息">
            <div class="become-member-title">恭喜您成为我们的会员</div>
            <div class="become-member-tip">享受专属特权与优惠</div>
            <Button class="become-member-btn" @click="hide">立即体验</Button>
        </div>
        <div class="close-item" @click="hide">
            <TechIcon name="close-white" />
        </div>
    </Popup>
</template>

<script>
import { Popup, Button } from 'vant';
import { TechIcon } from '@components/base';
export default {
    name: 'BecomeMember', // 成为会员
    components: {
        Popup,
        TechIcon,
        Button,
    },
    data() {
        return {
            visiable: false,
        };
    },
    methods: {
        show() {
            this.visiable = true;
        },
        hide() {
            this.visiable = false;
        },
    },
};
</script>

<style lang="less">
.tech-become-member {
    height: 100vh;
    width: 100%;
    &.van-popup {
        background-color: transparent;
    }
    .flex-column-center();
    .become-member-content {
        background-color: @white;
        width: 85%;
        .flex-column-center();
        .p-b(@gap-lg * 2);
        border-radius: @border-radius;
        .become-member-img {
            width: 100%;
            .m-b(@gap-lg);
        }
        .become-member-title {
            .font-size(20px);
            color: @text-color;
            // font-weight: @font-weight-bold;
            .m-b(@gap);
        }
        .become-member-tip {
            .font-size-sm();
            max-width: 70%;
            .t-c();
            .m-b(@gap-md);
            color: @gray-dark;
        }
        .become-member-btn {
            width: 70%;
            height: 44px;
            border-radius: 22px;
            .linear-right(#FFE7AD, #EDCE72);
            color: #885E0D;
            font-size: @font-size-md;
        }
    }
    .close-item {
        .m-t(30);
    }
}
</style>
